<template>
    <div class="tableDatas">
    <div class="searchWord">
    <div style="display: inline-block"> 搜索：</div>
    <el-input v-model="search" class='searchs' placeholder="请输入搜索内容">
    </el-input>
    </div>
    <!-- 遍历表格 -->
    <el-table
    border
    ref="multipleTable"
    :data="tables"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
    type="selection"
    width="55">
    </el-table-column>
    <el-table-column
    prop="lid"
    label="数量"
    width="120">
    </el-table-column>
    <el-table-column
    prop="lname"
    label="名称"
    width="120">
    </el-table-column>
    <el-table-column
    prop="price"
    label="价格"
    show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="操作" width="150">
    <template slot-scope="scope">
    <el-button
    size="mini"
    round class='el-icon-edit'
    @click="handleDelete(scope.$index, scope.row)">修改</el-button>
    </template>
    </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <div class="block">
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage4"
    :page-size="50"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400">
    <!-- 总计 -->
    </el-pagination>
    </div>
    </div>
    </template>
<script>
export default {
  data () {
    return {
      search: '',
      isPaging: true, // 是否显示分页
      pageIndex: 1, // 当前页（必传）
      pageSize: 20, // 每页多少条
      currentPage: 1, // 当前显示3页
      totalNumber: 1, // 总条数
      totalPage: 1, // 总页数
      pno: '1', // 页码
      // 分页功能
      currentPage4: 4,
      tableData: [], // 后台拿来的数据
      // 表单功能
      itemList: [],
      multipleSelection: []
    }
  },
  computed: {
    // 模糊搜索
    tables () {
      const search = this.search
      if (search) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.tableData.filter(data => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some(key => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.tableData
    }
  },
  methods: {
    // getData() {
    // console.log('生命周期')
    // this.axios.get('../../static/database.json').then(response => {
    // console.log(response.data);
    // this.tableData=response.data
    // }, response => {
    // console.log("error");
    // });
    // },
    // 分页功能 页码大小 val控制每页多少条信息
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      // this.pagesize=`${val}`;
      const url = `http://127.0.0.1:3000/getGoodList?pageSize=${val}`
      this.axios.get(url).then(result => {
        this.tableData = result.data.data
      })
    },
    // 当页码数发生改变的时候执行的函数 val代表页数 没问题了
    handleCurrentChange (val) {
      console.log(`这是${val}页`)
      const url = `http://127.0.0.1:3000/getGoodList?pno=${val}` // pno=${this.pno++}`
      this.axios.get(url).then(result => {
        this.tableData = result.data.data
      })
    },
    // 表单功能
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  },
  created () {
    console.log('table测试页')
    // this. getData();
    const url = 'http://127.0.0.1:3000/getGoodList'
    this.axios.get(url).then(result => {
      this.tableData = result.data.data
      console.log(this.tableData)
    })
  }
}
</script>
    <style>
    .searchs{
    display: inline-block;
    width: 1300px;
    }
    </style>
